<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对话术管理</title>
    <style>
        :root {
            --primary: #2563eb;
            --bg: #f8fafc;
            --input-border: #e2e8f0;
            --input-focus: #93c5fd;
        }

        body {
            margin: 0;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: var(--bg);
        }

        .container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .api-settings {
            margin-bottom: 20px;
            display: flex;
            gap: 10px;
            align-items: center;
        }

        input, button {
            padding: 8px 12px;
            border: 1px solid var(--input-border);
            border-radius: 8px;
            outline: none;
            transition: border-color 0.2s;
        }

        input:focus {
            border-color: var(--input-focus);
        }

        button {
            background: var(--primary);
            color: white;
            border: none;
            cursor: pointer;
            transition: all 0.2s;
        }

        button:hover {
            opacity: 0.9;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        th, td {
            padding: 12px 16px;
            text-align: left;
            border-bottom: 1px solid #e2e8f0;
        }

        th {
            background-color: #f1f5f9;
            font-weight: 500;
        }

        .action-btn {
            padding: 6px 12px;
            margin-right: 8px;
        }

        .edit-btn {
            background-color: #3b82f6;
        }

        .delete-btn {
            background-color: #ef4444;
        }

        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }

        .modal-content {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            width: 400px;
        }

        .form-group {
            margin-bottom: 16px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
        }

        .form-group input {
            width: 100%;
            box-sizing: border-box;
        }

        .modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div style="margin-bottom: 20px;">
            <a href="index.html" style="color: var(--primary); text-decoration: none; font-weight: 500;">返回AI助手</a>
        </div>
        <div class="api-settings">
            <input type="text" id="apiUrl" value="http://127.0.0.1:8888" placeholder="API地址">
            <button onclick="saveApiUrl()">保存</button>
        </div>

        <div class="header">
            <h1>话术管理</h1>
            <button onclick="openCreateModal()">新增话术</button>
        </div>

        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>问题/情况</th>
                    <th>话术</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="speechcraft-list">
                <!-- 列表数据将通过JS动态加载 -->
            </tbody>
        </table>
    </div>

    <!-- 新增/编辑模态框 -->
    <div id="editModal" class="modal">
        <div class="modal-content">
            <h2 id="modal-title">新增话术</h2>
            <div class="form-group">
                <label for="edit-key">问题/情况</label>
                <input type="text" id="edit-key">
            </div>
            <div class="form-group">
                <label for="edit-value">话术</label>
                <textarea id="edit-value" rows="4" style="width: 100%; padding: 8px 12px; border: 1px solid var(--input-border); border-radius: 8px; outline: none; transition: border-color 0.2s;"></textarea>
            </div>
            <div class="modal-footer">
                <button onclick="closeModal()">取消</button>
                <button id="modal-submit-btn" onclick="submitForm()">提交</button>
            </div>
        </div>
    </div>

    <script>
        let apiBaseUrl = 'http://127.0.0.1:8888';
        let currentEditId = null;

        function saveApiUrl() {
            const urlInput = document.getElementById('apiUrl');
            apiBaseUrl = urlInput.value;
            alert('API地址已更新为: ' + apiBaseUrl);
            loadSpeechcrafts();
        }

        function loadSpeechcrafts() {
            fetch(`${apiBaseUrl}/v1/speechcraft`)
                .then(response => response.json())
                .then(data => {
                    const tbody = document.getElementById('speechcraft-list');
                    tbody.innerHTML = '';
            
                        data.data.list.forEach(item => {
                            const tr = document.createElement('tr');
                    tr.innerHTML = `
                        <td>${item.id}</td>
                        <td>${item.key}</td>
                        <td>${item.value}</td>
                        <td>
                            <button class="action-btn edit-btn" onclick="openEditModal('${item.id}', '${item.key}', '${item.value}')">编辑</button>
                            <button class="action-btn delete-btn" onclick="deleteSpeechcraft('${item.id}')">删除</button>
                        </td>
                    `;
                        tbody.appendChild(tr);
                    });
                    
                });
        }

        function openCreateModal() {
            currentEditId = null;
            document.getElementById('modal-title').textContent = '新增对话术';
            document.getElementById('edit-key').value = '';
            document.getElementById('edit-value').value = '';
            document.getElementById('editModal').style.display = 'flex';
        }

        function openEditModal(id, key, value) {
            currentEditId = id;
            document.getElementById('modal-title').textContent = '编辑对话术';
            document.getElementById('edit-key').value = key;
            document.getElementById('edit-value').value = value;
            document.getElementById('editModal').style.display = 'flex';
        }

        function closeModal() {
            document.getElementById('editModal').style.display = 'none';
        }

        function submitForm() {
            const key = document.getElementById('edit-key').value;
            const value = document.getElementById('edit-value').value;

            if (!key || !value) {
                alert('请填写完整信息');
                return;
            }

            const payload = { key, value };
            let method = 'POST';
            let url = `${apiBaseUrl}/v1/speechcraft`;

            if (currentEditId) {
                method = 'PUT';
                url = `${apiBaseUrl}/v1/speechcraft/${currentEditId}`;
            }

            fetch(url, {
                method,
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(payload)
            })
            .then(response => {
                if (response.ok) {
                    closeModal();
                    loadSpeechcrafts();
                } else {
                    alert('操作失败');
                }
            });
        }

        function deleteSpeechcraft(id) {
            if (!confirm('确定要删除这条对话术吗？')) return;

            fetch(`${apiBaseUrl}/v1/speechcraft/${id}`, {
                method: 'DELETE'
            })
            .then(response => {
                if (response.ok) {
                    loadSpeechcrafts();
                } else {
                    alert('删除失败');
                }
            });
        }

        // 页面加载时获取对话术列表
        window.addEventListener('DOMContentLoaded', () => {
            loadSpeechcrafts();
        });
    </script>
</body>
</html>